<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">

      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-button @click.native="detailId=0,addVisible=true" size="small">添加请假类型</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStripe"
            :border="tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              label="ID"
              align="center"
              prop="id">
          </el-table-column>
          <el-table-column
              prop="name"
              label="请假类型"
              align="center"
          />
          <el-table-column
              prop="pic"
              label="审核人"
              align="center"
          >
            <template slot-scope="scope">
              <el-tag
                  :disable-transitions="false"
                  class="mr-10"
                  v-for="items in scope.row.user_ids"
                  :key="items.id"
              >{{ items.realname }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="detailId=scope.row.id,addVisible=true">详情</el-button>
              <el-button size="small" type="danger" plain @click="handleDetel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <addTypeUser :visible.sync="addVisible" :id="detailId" @InitFn="InitFn"></addTypeUser>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import addTypeUser from "./addTypeUser";
import {typeIndex, typeDelete} from '@/api/admin/staffService'

export default {
  components: {
    addTypeUser
  },
  data() {
    return {
      addVisible: false,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      sumAll: 0,
      userVisible: false,
      dynamicTagsArray: {},
      searchForm: {
        p: 1
      },
      detailId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.searchForm.p = this.page.pageindex
      typeIndex(this.searchForm).then(res => {
        console.log('res:', res)
        this.arryList = res.list.data;
        this.page.total = res.list.total;
      })
      // let data = await this.$fetch(this.api.tools_index, this.searchForm);
      // if (!data.code) {
      //   this.arryList = data.list.data;
      //   this.page.total = data.list.total;
      //   this.sumAll = data.sum;
      // }
    },
    // index分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    adduser() {
      this.userVisible = true
    },
    // 删除
    handleDetel(item) {
      this.$confirm(`确认删除【${item.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item)
      }).catch(() => {
      })
    },
    detelRespon(item) {
      typeDelete({id: item.id}).then(res => {
        if (!res.code) {
          this.$message.success('操作成功！')
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    studentFn(option) {
      console.log('option:', option)

    }
  },
  mounted() {
  }
}
</script>


